<template>
	<div class="deparbox">
		<div class="swiper">
			<swiper class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
				circular="true" :duration="duration">
				<swiper-item>
					<image src="../../static/百货banner2.png" mode=""></image>
				</swiper-item>
				<swiper-item>
					<image src="../../static/百货banner1.png" mode=""></image>
				</swiper-item>
			</swiper>
		</div>
		<div class="recommend">
			<div class="left">
				<image src="../../static/bottle.png" mode=""></image>
			</div>
			<div class="right">
				<image src="../../static/testroom.png" mode=""></image>
				<image src="../../static/rim.png" mode=""></image>
			</div>
		</div>
		<div class="arrivals">
			<div class="title">
				<span class="characters">百货上新</span>
				<span class="englishtext">NEW ARRIVALS</span>
			</div>
			<div class="content">
				<div v-for="(item,index) in arrivalsdata" :key="index">
					<image :src="item.img" mode=""></image>
					<div>
						<image :src="item.img" mode=""></image>
						<div class="goodsinfo">
							<p class="gname">{{item.name}}</p>
							<p class="gmsg">{{item.msg}}</p>
							<p class="price">￥{{item.price}}</p>
							<span class="paythis" @click="toinfo(item.id)" >立即购买</span>
						</div>
					</div>
				</div>

			</div>
		</div>
		<div class="goodslist">
			<p class="title"><span class="f">猜你喜欢</span><span class="s">YOU MAY ALSO LIKE</span></p>
			<div v-for="(item,index) in listdata" :key="index" @click="toinfo(item.id)" >
				<image :src="JSON.parse(item.swiper)[0]" mode=""></image>
				<p class="gname">{{item.name}}</p>
				<p class="ginfo"><span class="price">￥{{item.price}}</span><span
						class="paynum">{{item.paynum}}人已购买</span></p>
				<span>+</span>
			</div>
			<div v-if="listdata.length%2!==0"></div>
		</div>
		<div class="lodingbox">{{lodingmsg}}</div>
	</div>
</template>

<script>
	import request from "../../utils/request.js"
	export default {
		data() {
			return {
				indicatorDots: true,
				autoplay: true,
				interval: 3000,
				duration: 500,
				arrivalsdata: [{
						name: "喜茶 无糖气泡水 多口味选择 12瓶入",
						msg: "规格为12瓶/箱装",
						price: "66",
						img: "/static/arrivals1.png",
						id: "1"
					},
					{
						name: "喜茶暴柠茶 6瓶/12瓶",
						msg: "浓暴柠柠檬粤红/清暴柠柠檬绿妍",
						price: "66",
						img: "/static/arrivals2.png",
						id: "3"
					},
					{
						name: "喜茶果汁茶 x Girlcult联名礼盒",
						msg: "内含定制款高光&腮红及果汁茶",
						price: "199",
						img: "/static/arrivals3.png",
						id: "5"
					}
				],
				listdata: [],
				limitnum: 0,
				lodingmsg: "努力加载中"
			}
		},
		methods: {
			toinfo(num){
				uni.navigateTo({
					url:"../goodsinfo/goodsinfo?id="+num
				})
			}
		},
		components: {

		},
		async mounted() {
			let data = await request("/wx_getdata", {
				num: this.limitnum
			}, "GET");
			// console.log(data);
			this.listdata = data
		},
		onReachBottom() {
			setTimeout(async () => {
				this.limitnum += 1;
				let data = await request("/wx_getdata", {
					num: this.limitnum
				}, "GET");
				console.log(data);
				if (data.length !== 0) {
					this.listdata = this.listdata.concat(data)
					console.log(this.listdata);
				} else {
					this.lodingmsg = "到底了"
				}
			}, 1000)

		},
	}
</script>

<style scoped>
	.deparbox {
		background-color: #fafafa;
	}

	.swiper {
		width: 100vw;
		height: 100vw;
	}

	.swiper image {
		width: 100%;
		height: 100%;
	}

	.recommend {
		width: 100%;
		height: 400rpx;
		display: flex;
	}

	.recommend>.left,
	.recommend>.right {
		width: 50%;
		box-sizing: border-box;
		padding: 20rpx;
		overflow: hidden;
	}

	.recommend>.left>image {
		width: 100%;
		height: 100%;
	}

	.recommend>.right {
		padding: 20rpx 20rpx 20rpx 0;
		display: flex;
		flex-wrap: wrap;
		align-content: space-between;
	}

	.recommend>.right>image {
		width: 100%;
		height: 170rpx;
	}

	.arrivals {
		margin-top: 40rpx;
		padding: 0 20rpx;
	}

	.arrivals>.title {
		display: flex;
		padding-bottom: 40rpx;
	}

	.arrivals>.title>.characters {
		font-weight: 900;
		font-size: 40rpx;
	}

	.arrivals>.title>.englishtext {
		font-size: 14px;
		color: #C7C7C7;
		align-self: flex-end;
		margin-left: 20rpx;
	}

	.arrivals>.content>div>image {
		width: 100%;
		height: 355rpx;
		margin-bottom: 40rpx;
	}

	.arrivals>.content>div>div {
		width: 100%;
		display: flex;
		padding: 40rpx 20rpx;
		box-sizing: border-box;
		margin-bottom: 40rpx;
		justify-content: space-between;
		background-color: white;
	}

	.arrivals>.content>div>div>image {
		width: 310rpx;
		height: 290rpx;
	}

	.arrivals>.content .goodsinfo {
		width: 320rpx;
		box-sizing: border-box;
		padding-top: 40rpx;
	}

	.arrivals>.content .goodsinfo>.gname {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.arrivals>.content .goodsinfo>.gmsg {
		font-size: 26rpx;
		color: #999;
		width: 260rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.arrivals>.content .goodsinfo>.price {
		font-size: 40rpx;
		margin: 20rpx 0;
	}

	.arrivals>.content .goodsinfo span {
		display: inline-block;
		width: 170rpx;
		height: 60rpx;
		border-radius: 60rpx;
		background-color: #DBA871;
		color: white;
		text-align: center;
		line-height: 60rpx;
		font-size: 26rpx;
	}

	.goodslist {
		width: 100%;
		display: flex;
		justify-content: space-around;
		flex-wrap: wrap;
	}

	.goodslist>div {
		width: 332rpx;
		position: relative;
		padding: 0 0 40rpx;
		margin: 20rpx 0;
		background-color: white;
	}

	.goodslist>.title {
		padding: 40rpx 20rpx;
		width: 100%;
	}

	.goodslist>.title>.f {
		font-weight: 900;
		font-size: 40rpx;
	}

	.goodslist>.title>.s {
		font-size: 14px;
		color: #C7C7C7;
		align-self: flex-end;
		margin-left: 20rpx;
	}

	.goodslist>div>image {
		width: 332rpx;
		height: 332rpx;

	}

	.goodslist>div .gname {
		padding: 20rpx 0 0 10rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.goodslist>div .ginfo {
		padding: 10rpx 0 0 10rpx;
	}

	.goodslist>div .ginfo>.price {
		font-size: 38rpx;
	}

	.goodslist>div .ginfo>.paynum {
		font-size: 20rpx;
		color: #ccc;
		margin-left: 6px;
	}

	.goodslist>div>span {
		display: inline-block;
		width: 40rpx;
		height: 40rpx;
		font-size: 40rpx;
		background-color: #DBA871;
		text-align: center;
		line-height: 40rpx;
		color: white;
		border-radius: 50%;
		position: absolute;
		bottom: 42rpx;
		right: 10rpx;
	}

	.lodingbox {
		width: 100%;
		text-align: center;
		padding-bottom: 40rpx;
	}
</style>
